<div ui-i18n="en" class="ui-grid">
  <!-- TODO (c0bra): add "scoped" attr here, eventually? -->
  <style ui-grid-style>
    .grid{{ grid.id }} {
      /* Styles for the grid */
    }

    .grid{{ grid.id }} .ui-grid-row, .grid{{ grid.id }} .ui-grid-cell, .grid{{ grid.id }} .ui-grid-cell .ui-grid-vertical-bar {
      height: {{ grid.options.rowHeight }}px;
    }

    .grid{{ grid.id }} .ui-grid-row:last-child .ui-grid-cell {
      border-bottom-width: {{ ((grid.getTotalRowHeight() < grid.getViewportHeight()) && '1') || '0' }}px;
    }

    {{ grid.verticalScrollbarStyles }}
    {{ grid.horizontalScrollbarStyles }}

    /*
    .ui-grid[dir=rtl] .ui-grid-viewport {
      padding-left: {{ grid.verticalScrollbarWidth }}px;
    }
    */

    {{ grid.customStyles }}
  </style>

  <div class="ui-grid-contents-wrapper">
    <div ui-grid-menu-button ng-if="grid.options.enableGridMenu"></div>

    <div ng-if="grid.hasLeftContainer()" style="width: 0" ui-grid-pinned-container="'left'"></div>

    <div ui-grid-render-container
      container-id="'body'"
      col-container-name="'body'"
      row-container-name="'body'"
      bind-scroll-horizontal="true"
      bind-scroll-vertical="true"
      enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar"
      enable-vertical-scrollbar="grid.options.enableVerticalScrollbar">
    </div>

    <div ng-if="grid.hasRightContainer()" style="width: 0" ui-grid-pinned-container="'right'"></div>


    <div ui-grid-grid-footer ng-if="grid.options.showGridFooter"></div>

    <div ui-grid-column-menu ng-if="grid.options.enableColumnMenus"></div>

    <div ng-transclude></div>
  </div>
</div>
